<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <FullScreenCom />
        <div>
          <title-card title="引用方法"></title-card>
          <pre-code :code="code1" language="TypeScript" />

          <title-card title="窗口全屏"></title-card>
          <pre-code :code="code2" language="TypeScript" />

          <title-card title="DOM全屏"></title-card>
          <pre-code :code="code3" language="TypeScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="FullScreen" lang="ts">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from "@/components/TitleCard/index.vue";
import FullScreenCom from "./FullScreenCom/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const code1 = ref(`import { useFullscreen } from '@vueuse/core';`);
const code2 = ref(`// <n-button type="info" @click="enter" class="mr-2"> Enter Window Full Screen </n-button>

const { enter, toggle, exit, isFullscreen } = useFullscreen();`);
const code3 = ref(`// <div
//     ref="domRef"
//     class="domRef"
//   >
//   <n-button type="primary" @click="toggleDom" class="mr-2"> Exit Dom Full Screen </n-button>
// </div>

const { toggle: toggleDom } = useFullscreen(domRef);`);
const getTitle = () => {
  postArticleDetail({
    route: 'FullScreen',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>